<h3>{{(name || labels.Dropdown) + " " + labels.Values  + (!readonly ? "  |  " : "")}}
    <a v-if="!readonly" style="cursor:pointer" @click="addDropdownValues()">{{ ButtonTextCreate }}</a>
</h3>
<div id="WorkflowDesignerDropdownValues" class="WorkflowDesignerWindowForm">
    <table class="WorkflowDesignerTable">
        <th>
            <td v-if="isIE"></td>
            <td><b>{{labels.Name}}</b></td>
            <td><b>{{labels.Value}}</b></td>
        </th>
        <tr v-for="(item, index) in items"
            :class="dragOverIndex == index && dragOverBlock  == item ? 'dragOver' : ''"
            @dragstart="dragstart(index, $event)" @dragend="dragend($event)"
            @dragover="dragover(item, index, $event)">
            <td class='WorkflowDesignerTableMoveCol' :draggable="!readonly" style="cursor:grab;"><div v-if="!readonly" class='WorkflowDesignerTableMoveButton'></div></td>
            <td>
                <el-input
                    v-model="item.Name" 
                    :title="validateFieldDD('Name', item)"
                    :class="validateFieldDD('Name', item) ? 'WorkflowDesignerInputError' : ''"
                    :readonly="readonly">
                </el-input>
            </td>
            <td>
                <el-input v-model="item.Value"                
                    :title="validateFieldDD('Name', item)" 
                    :class="validateFieldDD('Name', item) ? 'WorkflowDesignerInputError' : ''"
                    :readonly="readonly">
                </el-input>
            </td>
 
            <td v-if="!readonly" class="WorkflowDesignerTableEditButtons Double">
                <el-button-group>
                    <el-button @click="removeDropdownValues(item, index)" class="WorkflowDesignerTableDeleteButton"></el-button>
                </el-button-group>
            </td>
        </tr>
    </table>
</div>
<div class="WorkflowDesignerButtons">
    <el-button v-if="!readonly" @click="onSave" type="primary">{{ ButtonTextSave }}</el-button>
    <el-button @click="onClose">{{ ButtonTextCancel }}</el-button>
</div>
<el-dialog
    :title="confirmdialog.title"
    :before-close="function() {confirmdialog.visible = false}"
    :visible="confirmdialog.visible"
    :modal-append-to-body="false"
    width="30%">
    <span>{{ confirmdialog.message }}</span>
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmdialog.onSuccess">{{confirmdialog.yes}}</el-button>
        <el-button @click="confirmdialog.visible = false">{{confirmdialog.no}}</el-button>
    </span>
</el-dialog> 
<script type="application/javascript">
    function dropdownValues_Init(me){
         me.VueConfig.data = Object.assign(me.VueConfig.data, {
            readonly: false,
            labels: WorkflowDesignerConstants.DropdownValues,
            name: undefined,
            ButtonTextCreate: WorkflowDesignerConstants.ButtonTextCreate,
            ButtonTextDelete: WorkflowDesignerConstants.ButtonTextDelete,
            ButtonTextSave: WorkflowDesignerConstants.ButtonTextSave,
            ButtonTextCancel: WorkflowDesignerConstants.ButtonTextCancel,
            confirmdialog: {
                title: WorkflowDesignerConstants.DialogConfirmText,
                message: WorkflowDesignerConstants.CloseWithoutSaving,
                visible: false,
                yes: WorkflowDesignerConstants.ButtonTextYes,
                no: WorkflowDesignerConstants.ButtonTextNo,
                onSuccess: function(){
                    me.VueConfig.data.confirmdialog.visible = false;
                    me.onClose(true);
                }
            }
        });

        me.VueConfig.methods.onUpdate = function(parentItem){
            me.parentItem = parentItem;
            
            me.VueConfig.data.items = WorkflowDesignerCommon.clone(parentItem.DropdownValues);
            me.VueConfig.data.name = parentItem.Name;
            me.VueConfig.data.readonly = me.graph.Settings.readonly;
        };

        me.VueConfig.methods.addDropdownValues = function(){
            me.VueConfig.data.items.push({value: '', name: ''});
        };

        me.VueConfig.methods.removeDropdownValues = function(item, index){
            me.VueConfig.data.items.splice(index, 1);
        };

        me.VueConfig.methods.validateFieldDD = function(name, item){
            if(name != 'Name' && name != 'Value')
                return;

            if(!item[name]){
                return WorkflowDesignerConstants.FieldIsRequired;
            }
        };
        

        me.VueConfig.methods.onHideEvent = function(){
            me.VueConfig.data.confirmdialog.visible = false;
            delete me.parentItem;
        };

        me.VueConfig.methods.validate = function(){
            var validateFunc = me.VueConfig.methods.validateFieldDD;
            var items = me.VueConfig.data.items;
            for(var i=0; i < items.length; i++){
                var item = items[i];

                if (validateFunc('Name', item) || validateFunc('Value', item))
                    return false;
            }

            return true;
        };

        me.VueConfig.methods.onSave = function(){
            if(me.VueConfig.methods.validate && me.VueConfig.methods.validate()){
                me.graph.UpdateData(me.parentItem.DropdownValues, me.VueConfig.data.items);
                me.onClose(true);
            }
        };

        me.VueConfig.methods.onClose = function(){
            if(me.VueConfig.data.readonly)
            {
                me.onClose(true);
                return;
            }

            if (!me.VueConfig.data.readonly && !WorkflowDesignerCommon.compareArray(
                me.parentItem.DropdownValues, 
                me.VueConfig.data.items, 
                ["Name", "Value"])) {
                
                me.VueConfig.data.confirmdialog.visible = true;
                return false;
            }
            else{
                me.onClose(true);
            }
        };
    };
</script>